<template>
  <el-drawer
    :title="t('mail.viewEmail')"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('mail.category')"
          label-align="right"
          :span="2"
          >{{ formView.category }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('mail.businessKey')"
          label-align="right"
          :span="2"
          >{{ formView.businessKey }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('mail.sendTo')"
          label-align="right"
          :span="2"
          >{{ formView.sendTo }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('mail.subject')"
          label-align="right"
          :span="2"
          >{{ formView.subject }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('mail.files')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" type="info" v-if="formView.files">
            {{ t("common.true") }}</el-tag
          >
          <el-tag size="small" type="info" v-if="!formView.files">
            {{ t("common.false") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('mail.status')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" type="info" v-if="formView.status == 0">
            {{ t("mail.statusDaft") }}</el-tag
          >
          <el-tag size="small" type="success" v-if="formView.status == 1">
            {{ t("mail.statusSuccess") }}</el-tag
          >
          <el-tag size="small" type="danger" v-if="formView.status == 2">
            {{ t("mail.statusFailed") }}</el-tag
          >
        </el-descriptions-item>

        <el-descriptions-item
          :label="t('mail.createTime')"
          label-align="right"
          >{{ formView.createTime }}</el-descriptions-item
        >
        <el-descriptions-item :label="t('mail.sendTime')" label-align="right">
          <span v-if="formView.sendTime"> {{ formView.sendTime }}</span>
          <span v-if="!formView.sendTime"> - </span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('mail.nextTime')" label-align="right">
          <span v-if="formView.nextTime"> {{ formView.nextTime }}</span>
          <span v-if="!formView.nextTime"> - </span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('mail.errorCount')" label-align="right">
          <el-tag size="small" type="info"> {{ formView.errorCount }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('mail.content')"
          label-align="right"
          :span="2"
        >
          <div v-html="formView.content"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../utils/utils";
import { useI18n } from "vue-i18n";
import apiMail from "../api/mail";
const { t } = useI18n({ useScope: "global" });
// ts 语法，有默认值版本

const state = reactive({
  dialogFormVisible: false,
});

const formViewOriginal = () => {
  return {
    businessKey: "",
    category: "",
    sendTo: "",
    subject: "",
    files: "",
    status: 0,
    createTime: "",
    sendTime: "",
    nextTime: "",
    errorCount: 0,
    content: "",
  };
};

const formView = reactive(formViewOriginal());

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());

  apiMail
    .getMail(row.mailId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
